/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: rgb(var(--nprogress-color));

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow:
    0 0 10px rgb(var(--nprogress-color)),
    0 0 5px rgb(var(--nprogress-color));
  opacity: 1;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: rgb(var(--nprogress-color));
  border-left-color: rgb(var(--nprogress-color));
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out; /* 透明度过渡，持续0.3秒，缓动效果 */
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0; /* 元素进入前和离开后的透明度为0，实现淡入淡出效果 */
}

/* 淡入淡出滑动效果 */
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s; /* 所有属性过渡，持续0.3秒 */
}
.fade-slide-enter-from {
  opacity: 0; /* 元素进入前透明度为0 */
  transform: translateX(-30px); /* 元素进入前向左平移30像素 */
}
.fade-slide-leave-to {
  opacity: 0; /* 元素离开后透明度为0 */
  transform: translateX(30px); /* 元素离开后向右平移30像素 */
}

/* 底部淡入淡出效果 */
.fade-bottom-enter-active,
.fade-bottom-leave-active {
  transition:
    opacity 0.25s, /* 透明度过渡，持续0.25秒 */
    transform 0.3s; /* 变换过渡，持续0.3秒 */
}
.fade-bottom-enter-from {
  opacity: 0; /* 元素进入前透明度为0 */
  transform: translateY(-10%); /* 元素进入前向上平移10% */
}
.fade-bottom-leave-to {
  opacity: 0; /* 元素离开后透明度为0 */
  transform: translateY(10%); /* 元素离开后向下平移10% */
}

/* 缩放淡入淡出效果 */
.fade-scale-leave-active,
.fade-scale-enter-active {
  transition: all 0.28s; /* 所有属性过渡，持续0.28秒 */
}
.fade-scale-enter-from {
  opacity: 0; /* 元素进入前透明度为0 */
  transform: scale(1.2); /* 元素进入前放大到120% */
}
.fade-scale-leave-to {
  opacity: 0; /* 元素离开后透明度为0 */
  transform: scale(0.8); /* 元素离开后缩小到80% */
}

/* 缩放淡入淡出效果2 */
.zoom-fade-enter-active,
.zoom-fade-leave-active {
  transition:
    transform 0.2s, /* 变换过渡，持续0.2秒 */
    opacity 0.3s ease-out; /* 透明度过渡，持续0.3秒，缓出效果 */
}
.zoom-fade-enter-from {
  opacity: 0; /* 元素进入前透明度为0 */
  transform: scale(0.92); /* 元素进入前缩小到92% */
}
.zoom-fade-leave-to {
  opacity: 0; /* 元素离开后透明度为0 */
  transform: scale(1.06); /* 元素离开后放大到106% */
}

/* 缩放淡出效果 */
.zoom-out-enter-active,
.zoom-out-leave-active {
  transition:
    opacity 0.1s ease-in-out, /* 透明度过渡，持续0.1秒，缓入缓出效果 */
    transform 0.15s ease-out; /* 变换过渡，持续0.15秒，缓出效果 */
}
.zoom-out-enter-from,
.zoom-out-leave-to {
  opacity: 0; /* 元素进入前和离开后透明度为0 */
  transform: scale(0); /* 元素进入前和离开后缩小到0 */
}
